<template>
	<view class="rule-page flex-col align-center" >
		<view class="" style="width: 100%;">
			<x-card fontSize="30rpx" background="#000" color="#FFF" border="none" ><view class="justify-center">
				操作记录
			</view></x-card>
		</view>
		<scroll-view style="height: 800rpx;" scroll-y>
			<view class="flex-col align-center">
			<view class="" style="width: 100%;">
				<view class=""  v-for="(item,index) in cardList" :key="index">
					<view class="justify-start" style="flex: 1;">
						<x-card fontSize="34rpx" background="#000" color="#FFF" border="none">{{item.player}}号玩家</x-card>
						<x-card fontSize="34rpx" background="#000" color="#FFF" border="none">抽到了"{{item.content}}" </x-card>
					</view>
					<view class="" v-if="inList.includes(item.content)">
						<x-btn @tap="item.use=false">{{!item.use?'已使用':'使用此牌'}}</x-btn>
					</view>
				</view>
				
			</view>
			<view class="" style="height: 250rpx;">
				
			</view>
			</view>
		</scroll-view>
		<view class="" style="width: 100%;">
			<x-card fontSize="40rpx" background="#000" color="#FFF" border="none" @tap="close"><view class="justify-center">
				继续游戏
			</view></x-card>
		</view>
	</view>
</template>

<script >
	// #ifdef VUE3
	import {
		getCurrentInstance
	} from 'vue'
	// #endif
	export default {
		data() {
			return {
				cardList:[],
				inList:[
					'神经病牌','王牌','厕所牌'
				]
			}
		},
		props:{
			record:{
				default:()=>{
					return []
				}
			}
		},
		watch:{
			record:{
				handler(newVal){
					let arr = newVal.map(item=>{
						return {
							player:item.player,
							content:item.content,
							use:this.inList.includes(item.content)
						}
					})
					this.cardList = arr.reverse()
				},
				immediate:true
			}
		},
		computed: {
			calculateHeight() {
				const {
					globalProperties: global
				} = getCurrentInstance().appContext.config;
				return `calc(${global.statusBarHeight}px)`;
				// // #ifdef VUE2
				// return `${this.statusHeight}px + ${this.height}rpx`;
				// // #endif
			},
		},
		methods: {
			close(){
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss" scoped>
 .rule-page{
	 background: rgba(0, 0, 0, 0.95);
	 position: fixed;
	 border-radius: 40rpx;
	 top: 50%;
	 left: 50%;
	 transform: translate(-50%, -50%);
	 width: 700rpx;
	 height:900rpx;
	 z-index: 99999;
 }
</style>
